<template>
	<div class="body">
		<div class="hello">
				<div class="img">
					<div class="img1"><img src="../../../static/img/zhuce-image-1.png" alt=""></div>
					<div class="img2"><img src="../../../static/img/zhuce-image-2.png" alt=""></div>
					<div class="img3"><img src="../../../static/img/zhuce-image-3.png" alt=""></div>
				</div>
				<div class="userImg">
					<img src="../../../static/img/user.png" alt="">
					<div class="userImg_dl">&nbsp;&nbsp;注&nbsp;册</div>
					<div class="to_denglu">
						已有有账号
						<router-link to="/login">立即登录</router-link>
					</div>
					<hr class="ui_hr">
				</div>
				<div class="text">
					<div>手 &nbsp;&nbsp;机&nbsp;&nbsp;号:<input id="phone" class="phone" v-model="Phone" placeholder="请输入手机号"></div><span id="phone_span"></span><br><br>
					<!-- <div>验 &nbsp;证&nbsp;码&nbsp;：&nbsp;<input id="issure" class="issure" type="password" placeholder="请再次输入密码"></div><span id="issure_span"></span><br><br> -->
					<div><input class="checkbox" type="checkbox">我已阅读并遵守<router-link to="/xieyi">《dypf协议》</router-link></div>
					<div><button v-on:click="add_Phone">下&nbsp;&nbsp;一&nbsp;&nbsp;步</button></div>
				</div>
		</div>
	</div>
</template>

<script>
  export default {
    name: 'Hello',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        Phone: '',
      }
    },
    methods: {
      add_Phone() {
		var phone = document.getElementById('phone').value;
		  
		if(phone == "" || phone == null){
			document.getElementById('phone_span').innerHTML = '手机号不能为空';
			return false
		}else{
			if(isNaN(phone)){
				document.getElementById('phone_span').innerHTML = '手机号为数字组成'
				return false
			}else{
				if(phone.length != 11){
					document.getElementById('phone_span').innerHTML = "手机号位数错误"
					return false
				}else{
					// console.log(this.phone)
					console.log('phone:'+phone)
					this.$router.push({path:'/register',query:{phone:phone}})
					// // var phone = phone;
					// this.$http.post('http://localhost:3000/api/user/addPhone', {
					//   phone: phone,
					// }, {}).then((response) => { 
					// 	console.log(response); 
					// 	this.$router.push("{path:'/register',{phone:phone}}")
					// })
				}
			}
		}
        
      }
    },
	mounted(){
		
	}
  }
</script>

<style scoped>
	.body{
		position: relative;
		top: 0;
		padding-top: 80px;
		padding-bottom: 50px;
		padding-left: 200px;
		background-image: url(../../../static/img/zhuce_bj.jpg);
		background-size: 100% 100%;
	}
	button{
		width: 245px;
		height: 40px;
		margin: 20px 10px 0 20px;
		background: #00B7FF;
		font-weight: 800;
	}
	button:hover{
		cursor: pointer;
	}
	input{
		margin-left: 30px;
		height: 40px;
		width: 200px;
		border: #CACACA 1px solid;
	}
	span{
		position: absolute;
		right: 0;
		color: red;
	}
	.issure{
		margin-left: 5px;
	}
	.hello{
		width: 1080px;
		height: 500px;
		background: #fff;
		position: relative;
	}
	.img{
		position: absolute;
		width: 690px;
		height: 400px;
		margin: 50px 40px 50px 0;
		/* background-color: #CACACA; */
		float: left;
	}
	.img1{
		width: 406px;
		height: 377px;
		position: absolute;
		top: 5px;
		left: 50px;
		z-index: 1000;
	}
	.img2{
		width: 409px;
		height: 364px;
		position: absolute;
		top: 5px;
		left: 200px;
		z-index: 999;
	}
	.img3{
		width: 437px;
		height: 384px;
		position: absolute;
		top: 5px;
		left: 290px;
	}
	.userImg{
		position: absolute;
		right: 270px;
		top: 25px;
	}
	.userImg_dl{
		position: absolute;
		top: 30px;
		left: 80px;
		width: 80px;
		font-size: 24px;
	}
	.to_denglu{
		position: absolute;
		margin-top: 16px;
		margin-left: 175px;
		width: 200px;
	}
	.ui_hr{
		margin-top: 36px;
		width: 310px;
		position: absolute;
	}
	.text{
		position: absolute;
		right: 30px;
		top: 150px;
		z-index: 1000;
		width: 300px;
		height: 370px;
		float: right;
		overflow: hidden;
		/* padding-top: 100px; */
	}
	.checkbox{
		width: 16px;
		height: 16px;
	}
	
</style>
